<script setup>
import {InfoFilled, Plus} from '@element-plus/icons-vue'
import axios from "axios";
import {nextTick, onMounted, reactive, ref} from "vue";
let publicityArray=ref([]);
let url= ref('http://localhost:80/file/downLoad?fileName=')
let clicked = ref(false)
const total = ref(0);
const imageUrl = ref('')
let publicity=ref({
  publicityId:"",
  publicityName:"",
  publicityText:"",
  publicityCreateTime:""
})

 //动态对象：分页
 const queryInfo = ref({
      pageNum:1,
      pageSize:2,
      // turl:'',
  })
// let heartknowledgeImg = ref('')
let len=ref(0);
// len.value=tableData.value.length
let isEdit=ref(false);
 //分页方法
 const handleSizeChange = (val) => {
    queryInfo.value.pageSize=val;
    queryInfo.value.pageNum =1;
    get();
  }
  const handleCurrentChange = (val) => {
      queryInfo.value.pageNum=val;
      get();
  }

const get=()=>{
  axios.get("/publicity/publicitySelectAll",
  {params:{
          pageNum:queryInfo.value.pageNum,
          pageSize:queryInfo.value.pageSize,
          // turl:queryInfo.value.turl
          }}
  )
      .then(res=>{
        console.log(res.data.data)
        publicityArray.value=res.data.data.list;
        total.value=res.data.data.total;
      })
      .catch((err)=>{
        console.log(err)
      })
}
onMounted(()=>{
  get();
})


function onCancel() {
  clicked.value = true
}

const fileList = ref([]);


let c=ref(1)

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const eee=(e)=>{
  console.log("e",e)
}
//修改
const publicityUpdate=(row)=>{
  dialogFormVisible.value = true;
  isEdit.value=true;
  console.log(row)
  publicity.value=row;
  fileList.value=[
    {
      name: row.imageUrl,
      url: url.value + row.imageUrl,
    }
  ];
}
//添加
const publicityAdd=()=>{
  dialogFormVisible.value = true;
  isEdit.value=false;
  publicity.value={
    id:"",
    name:"",
    simplyIntroduce:"",
    img:"",
    text:"",
  }
  fileList.value=[];
}
//图片上传
// const handleAvatarSuccess = (response,uploadFile)=> {
//   heartknowledgeImg.value = URL.createObjectURL(uploadFile.raw);
  // 一旦上传成功，则需要把返回的数据赋值给article.imageUrl
  // heartknowledge.value.img = response.data;
//   console.log('response',response)
//   console.log('uploadFile',uploadFile)
// }
//修改和添加
const save=()=>{
  if(!isEdit.value){
    console.log(isEdit.value);
    axios.post("/publicity/publicityAdd",publicity.value)
      .then(res=>{
        console.log(res.data.data)
        get();
        dialogFormVisible.value = false;
      })
  }
  else{
    axios.put("/publicity/publicityUpdate",publicity.value)
      .then(res=>{
          console.log(res.data.data)
          get();
          dialogFormVisible.value = false;
        })
      .catch((err)=>{
          console.log(err)
        })
  }
}
//删除
const handleDeleteAndCancel = id => {
  axios.delete("/publicity/publicityDelete/"+id)
    .then(res=>{
        console.log(res.data.data)
        get();
      })
    .catch((err)=>{
        console.log(err)
      });
  cancel();
};
</script>

<template>
  <div>
    <h1>心理知识管理</h1>
  </div>
  <div>
   
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
          <!-- <el-form-item label="FM类型">
          <el-input v-model="queryInfo" placeholder="请输入关键字" clearable />
          </el-form-item> -->
<!--   
          <el-form-item>
          <el-button type="primary" @click="get">搜索</el-button>
          </el-form-item> -->

      </el-form>
      <div class="mb20">
          <el-button @click="publicityAdd" type="primary" icon="Plus" plain>新增</el-button>
          <!-- <el-button   type="danger" icon="Delete"  plain>删除</el-button> -->
      </div>

    <el-table :data="publicityArray" style="width: 100%">
      
      <el-table-column fixed prop="publicityId" label="心理知识编号" width="100" />
      <el-table-column prop="publicityName" label="标题" width="140" />
      
      
      <el-table-column prop="publicityText"label="详情" width="120" />
      <el-table-column prop="publicityCreateTime"label="详情" width="120" />
      
    
      <el-table-column fixed="right"  label="管理" min-width="100">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="publicityUpdate(scope.row)">
            修改
          </el-button>
          <el-popconfirm
              width="220"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="是否删除?"
              @cancel="onCancel"
          >
            <template #reference>
                  <el-button link type="primary" size="small">删除</el-button>
                </template>
            <template #actions="{ confirm, cancel }">
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="handleDeleteAndCancel(scope.row.publicityId, cancel)"
              >
                确认删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <el-pagination
        v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[2, 5, 8, 10]"
        size="default"
  
        background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  <div>
    <!-- <el-pagination size="small" layout="prev, pager, next" :total="len" v-model:current-page="c" @update:current-page="" :background="true" /> -->
  </div>
  <el-dialog v-model="dialogFormVisible" :title="isEdit?'修改':'添加'" width="500">
    <el-form :model="publicity">
      <el-form-item v-if="isEdit" label="id" :label-width="formLabelWidth">
        <el-input  v-model="publicity.publicityId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="publicity.publicityName" autocomplete="off" />
      </el-form-item>
    
  
      <el-form-item label="详情" :label-width="formLabelWidth">
        <el-input v-model="publicity.publicityText" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="publicity.publicityCreateTime" autocomplete="off" />
      </el-form-item>
   
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          {{ isEdit ? '确认修改' : '确认添加'}}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>